<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #table_wrap{
            position: relative;

        }
        td{
            width:400px;
            height:400px;
            border-width:1px 1px 1px 0 ;
            border-color: #ccc;
            border-style:solid;
            opacity: 0.2;
        }
        tr{
            width:400px;
            height:400px;
            display: block;
            border-width:0px 0px 1px 0px ;
            border-color: #ccc;
            border-style:solid;
            position: relative;
        }


        .main{
            position: absolute;
            width:400px;
            height:400px;
            margin-left:10px;
            left:0;
            top:0;
        }
        .box{
            width:100%;
            height:100%;
            background: #fff;
            border:1px dashed #666;
            position: absolute;
        }
        .box .title{
            width:100%;
            height:30px;
            padding:0 5px 0 5px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
            display: inline-block;
            background: #ccc;

        }
        .box .img_wrap{
            width:100%;
            text-align: center;
        }
        .box .img_wrap img{
            margin-top:20px;
            width:80%;
        }
        .box .content{
            padding:10px;
            letter-spacing: 2px;
            line-height:30px;
        }

        .scale{
            width:20px;
            height:20px;
            display: block;
            position: absolute;
            text-align: center;
            line-height:20px;
            z-index:10000;
            right:0;
            bottom:0;
            overflow: hidden;
            cursor: nw-resize;
        }
        .scale img{
            display: none;
        }
    </style>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<div id="table_wrap">
    <table id="t_body">
    </table>
    <div class="main">
        <div class="box">
            <div class="title">包装设计的这么有创意，我宁愿天天吃外卖！</div>
            <div class="img_wrap">
                <img src="./imgs/1504862720533397.jpg" alt="">
            </div>
            <div class="content">
                <h5>我们现在对外卖的要求不仅要好吃，还要好看；特别是在外卖包装上，特别讲究，一个漂亮的包装，让人吃个外卖都显得高级了很多呢。</h5>
            </div>

        </div>
        <div class="scale"><img src="./imgs/scale.png" alt=""></div>
    </div>
    <div class="main">
        <div class="box">
            <div class="title">LOGO设计元素应用实例：海盗</div>
            <div class="img_wrap">
                <img src="./imgs/1504952558804363.jpg" alt="">
            </div>
            <div class="content">
                <h5>LOGO设计元素应用实例：海盗</h5>
            </div>
        </div>
        <div class="scale"><img src="./imgs/scale.png" alt=""></div>
    </div>
    <div class="main">
        <div class="box">
            <div class="title">浅谈电商网站设计的突破点</div>
            <div class="img_wrap">
                <img src="./imgs/1504781951529881.jpg" alt="">
            </div>
            <div class="content">
                <h5>每次网购完后，总是快速的关闭页面，一刻也不想停留，这是我的真实感受，也是大多数消费者的感受。在我看来大多数的电商网站会让我窒息。</h5>
            </div>
        </div>
        <div class="scale"><img src="./imgs/scale.png" alt=""></div>
    </div>
</div>

</body>
<script>
    function slide(val){
        val.each(function(index,val){

            var _width = Number( $(this).css("width").replace("px",'') )*index;
            $(val).animate({"left":_width+'px'},200)
        })
    }

    function SliderObject (objMoved) {
        var isMouseDown = false; //鼠标是否按下
        var mouseDownPosiX;
        var mouseDownPosiY;
        var InitPositionX;
        var InitPositionY;
        var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
        obj.mousedown(function (e) {
            //当鼠标按下时捕获鼠标位置以及对象的当前位置
            e.preventDefault();
            mouseDownPosiX = e.pageX;
            mouseDownPosiY = e.pageY;
            isMouseDown = true;
            InitPositionX = $(this).css("left").replace("px", "");
            InitPositionY = $(this).css("top").replace("px", "");

        }).mousemove(function (e) {

//当鼠标按下并且移动时，首先判断鼠标是否在当前焦点，以及鼠标是否已经弹起，
            if (isMouseDown) {
                var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX);
                var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY);
                var dirX =  parseInt(e.pageX)-parseInt(mouseDownPosiX);
                var dirY = parseInt(e.pageY)-parseInt(mouseDownPosiX);
                //获得拖拽区域的宽高
                var drag_width = $('.scale').width();
                var drag_height = $('.scale').height();
                $(this).parent().css({'width':tempX+drag_width +'px','height':tempY+drag_height+'px'});

            }
//当鼠标弹起或者离开元素时，将鼠标弹起置为false，不移动对象
        }).mouseup(function () {
            var _x = Math.ceil($(this).parent().width()/400)*400;
            var _y = Math.ceil($(this).parent().height()/400)*400;
            //鼠标松开，DIV大小应为还原为网格的整数倍，并且对齐网格
            $(this).parent().animate({"width":_x+'px',"height":_y+'px'},500);
            isMouseDown = false;
            return false
        }).mouseleave(function () {
            isMouseDown = false;
        });
    };
    var move = function(dragable){

        var client_x ;
        var client_y;
        var _index;
        var grid_num_x;
        var grid_num_y;
        var init_width;
        var init_height;
        var o_x;
        var o_y;
        $('.box').on('mousedown',function(e){
            e.preventDefault();
            $(this).parent().css({"zIndex":10000,'opacity':0.5});
            dragable = true;
            client_x = e.pageX;
            client_y = e.pageY;
            init_width = $(this).parent().offset().left;
            init_height = $(this).parent().offset().top;
            //移动中DIV的坐标
            var d_x;
            var d_y;

            var _x;
            var _y;

            //记录原始坐标值
            o_x = $(this).parent().css("left").replace("px", "");
            o_y = $(this).parent().css("top").replace("px", "");

            distance($(this).parent(),e.pageX,e.pageY,o_x,o_y)
            return(client_x,client_y,o_x,o_y);
        }) .on("mousemove",function(e){
            if(dragable ===  true){
                _x = e.pageX  - client_x+init_width;
                _y = e.pageY - client_y+init_height;
                grid_num_x = Math.ceil(_x/400);
                grid_num_y = Math.ceil(_y/400);
                $(this).parent().css({'left':_x+'px','top':_y+'px'});
                distance($(this).parent(),e.pageX,e.pageY,o_x,o_y)
            }
        }).on("mouseup",function(e){
            _x = grid_num_x*400;
            _y = grid_num_y*400;
            //鼠标松开，DIV大小应为还原为网格的整数倍，并且对齐网格
            $(this).parent().animate({'left':_x+grid_num_x*2+'px','top':_y+grid_num_y*2+'px',"zIndex":0,'opacity':1},200);
            dragable = false;
            return
        }).on("mouseleave",function(){
            dragable = false
        });
    }

    //计算点击位置距离每一个DIV的距离
    var distance = function(val,x,y,o_x,o_y){
        var obj = $(val) == undefined ? $(this) : $(val);
        //定义数组存储需要的坐标
        var dot = [];
        var dis1;
        var dis2;
        var dis3;
        var dis4;
        var angleDis = [];  //点击位置距离各定点距离集合
        var _val = val[0]  //排斥自身
        $('.main').not(_val).each(function(index,val){
           dot.push($(val).offset());
           dot[index].l2 = Number( dot[index].left + Number($(this).css('width').replace('px','')) );
           dot[index].t2 = Number( dot[index].top +Number($(this).css('marginTop').replace('px','')));
           dot[index].l3 = Number( dot[index].left);
           dot[index].t3 = Number( dot[index].top + Number($(this).css('height').replace('px','') ));
           dot[index].l4 = Number( dot[index].left + Number($(this).css('width').replace('px','')) );
           dot[index].t4 = Number( dot[index].top + Number($(this).css('height').replace('px','')) );
        })


        $(dot).each(function(index,val){  //获取点击位置到网格各个顶点的坐标
            var _left = dot[index].left;
            var _top = dot[index].top;
            var l2 = dot[index].l2;
            var t2 = dot[index].t2;
            var l3 = dot[index].l3;
            var t3 = dot[index].t3;
            var l4 = dot[index].l4;
            var t4 = dot[index].t4;
            //实现数组的排序规则
            var sortNum = function(a,b){
                return(a-b)
            }
            //计算距离
            dis1 = Math.ceil( Math.sqrt((x-_left)*(x-_left)+(y-_top)*(y-_top)) ) ;
            dis2 = Math.ceil( Math.sqrt((x-l2)*(x-l2)+(y-t2)*(y-t2)) ) ;
            dis3 = Math.ceil( Math.sqrt((x-l3)*(x-l3)+(y-t3)*(y-t3)) ) ;
            dis4 = Math.ceil( Math.sqrt((x-l4)*(x-l4)+(y-t4)*(y-t4)) ) ;
            angleDis.push(dis1,dis2,dis3,dis4);
            angleDis.sort(sortNum)  //对数组进行自小到大排序
            var sm_dis = angleDis[0];
            var e_dis = x - $(_val).offset().left;
//            $('.box').on('mouseup',function(){
//                    $(this).parent().animate({"left":o_x+'px','top':o_y+'px'})
//                    return
//                })
            if(sm_dis<e_dis){
                $(_val).find('.box').css({'border':'1px dashed red'});
//                $('.box').on('mouseup',function(){
//                    $(_val).css({"left":o_x+'px','top':o_y+'px'})
//                    return
//                })


            }else{
                $(_val).find('.box').css({'border':'1px dashed #666'});

//                    $(_val).css({'left':o_x+'px','top':o_y+'px'});
//                    return
//
            }
        })
    };
    $(function(){
        var table_num = [];
        var dragable = false
        table_num.length = 10;
        /*生成背景网格*/
        for(var i  = 0;i<table_num.length;i++){
            var table_td = document.createElement("td");
            document.getElementById('t_body').appendChild(table_td);
            table_td.className = 'grid_td'
        }
        for(var j = 0;j<table_num.length;j++){
            var table_tr = document.createElement("tr");
            $(table_tr).appendTo($('td'))
        }

        //鼠标移入显示缩放图标
        $('.scale').on('mouseover',function(){
            $(this).find('img').show()
        }).on('mouseout',function(){
            $(this).find('img').hide()
        })
        //调用
        slide($('.main'));
        SliderObject($(".scale"));
        move(dragable)
    })

</script>
</html>